<template>
  <div class="orderHeader">
    <div class="tabs">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部订单" name="first" />
        <!-- <el-tab-pane label="客服订单" name="second" />
        <el-tab-pane label="网络订单" name="third" /> -->
      </el-tabs>
    </div>
    <div class="orderSearch">
      <el-form ref="form" :model="orderSearch" :inline="true">
        <el-row :gutter="24">
          <el-col :span="5">
            <el-form-item label="订单号" size="mini">
              <el-input
                v-model="orderSearch.orderNum"
                type="textarea"
                placeholder="支持批量搜索,多个单号用逗号分隔"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="创建网点" size="mini">
              <el-select v-model="orderSearch.outlets" style="width: 120px">
                <el-option label="区域一" value="shanghai" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="订单状态" size="mini">
              <el-select v-model="orderSearch.outlets" style="width: 120px">
                <el-option label="区域一" value="shanghai" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item size="mini">
              <el-button type="primary" icon="el-icon-search">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderHeader",
  data() {
    return {
      activeName: "first",
      orderSearch: {
        // 查询订单的相关信息
        orderNum: "",
        outlets: "",
        createTime: "",
        orderState: "",
      },
      pickerOptions: {
        // 时间选择器的快选项
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      router: this.$router.path,
    };
  },
  watch: {},
  methods: {
    handleClick() {
      switch (this.activeName) {
        case "first":
          this.$router.push("/orderform/allorder");
          break;
        case "second":
          this.$router.push("/orderform/customerorder");
          break;
        case "third":
          this.$router.push("/orderform/weborder");
          break;
      }
    },
  },
  mounted() {
    if (this.$route.path == "/orderform/allOrder") {
      this.activeName = "first";
    } else if (this.$route.path == "/orderform/customerOrder") {
      this.activeName = "second";
    } else if (this.$route.path == "/orderform/webOrder") {
      this.activeName = "third";
    }
  },
};
</script>

<style scoped lang="scss">
.orderHeader {
  // margin-bottom: 10px;
  background-color: #fff;
  .orderSearch {
    margin: 10px;
    form {
      ::v-deep .el-form-item__label {
        font-size: 12px;
      }
      .el-textarea {
        width: 135px;
      }
    }
  }
}
</style>
